renderCoupon();

function renderCoupon() {
    function getUrlParams() {
        // let href = location.href;
        // let regExp = /.+\?(.+)/
        // let param = regExp.exec(href)[1]
        //     // console.log(param);
        //     // console.log(decodeURI(param));解码URI的参数编码

        // let paramArr = param.split("&");
        // // console.log(paramArr);
        // let query = {}
        // paramArr.forEach(item => {
        //     itemArr = item.split("=");
        //     // console.log(itemArr);
        //     query[itemArr[0]] = decodeURI(itemArr[1])
        // })
        let query = location.href.split('=')[1];
        // console.log(location.href);
        return query
    }
    let query = getUrlParams() //获取浏览器query参数
    console.log(query);
    // 获取Dom
    let main = document.getElementById('main');
    let list = document.getElementById('list');

    let mask = document.getElementById('mask');
    let img = document.getElementById('img');
    let left = document.getElementById('left');
    let right = document.getElementById('right');
    let disappear = document.getElementById('disappear');

    function renderProduct(res) {
        let html = "";
        let imgHtml = "";
        for (let i = 0; i < res.length; i++) {
            html += `
                <div class="youhui" productId="${res[i].couponProductId}">
                    <div class="cp-img">${res[i].couponProductImg}</div>
                    <div>
                        <p class="cp-name">${res[i].couponProductName}</p>
                        <p class="cp-price">${res[i].couponProductPrice}</p>
                        <p class="cp-time">${res[i].couponProductTime}</p>
                    </div>
                </div>`
            imgHtml += `
                <li>${res[i].couponProductImg}</li>
                `
        }
        list.innerHTML = html; //优惠券列表
        img.innerHTML = imgHtml; //轮播图图片
        let list_child = list.children;
        let list_length = list_child.length; //li的总数
        let image = img.children[1].children[0]; //ul里的里的图片
        let imageWidth = image.offsetWidth; //图片宽度
        let imageHeight = image.offsetHeight; //图片高度
        console.log(imageWidth);
        console.log(imageHeight);
        let index;
        for (let j = 0; j < list_length; j++) {
            list_child[j].onclick = function() {
                // 遮罩出现
                mask.style.transform = 'translateY(6.67rem)'
                mask.style.transition = 'transform .7s ease-in-out'
                index = list_child[j].getAttribute('productId');
                console.log(index);
                img.style.left = -index * imageWidth + 'px';
            }
        }
        // 上一页
        left.onclick = function() {
                index--;
                if (index < 0) {
                    img.style.left = 0;
                    alert('这是第一张')
                } else {
                    img.style.left = -index * imageWidth + 'px';

                }
            }
            // 下一页
        right.onclick = function() {
                index++;
                if (index >= list_length) {
                    index = list_length;
                    alert('这是最后一张')
                    img.style.left = -(index - 1) * imageWidth + 'px';
                } else {
                    img.style.left = -index * imageWidth + 'px';
                }
            }
            // 遮罩消失
        disappear.onclick = function() {
            mask.style.transition = 'transform .7s ease-in-out'
                // mask.style.top = "-100%";
            mask.style.transform = 'translateY(-6.67rem)'
        }
    }
    ajax({
        url: "http://chst.vip:1234/api/getcouponproduct",
        data: { couponid: query },
        success(res) {
            res = res.result
            renderProduct(res);
        }
    })
}